import React, { Component, Fragment } from 'react'
import BlogHeader from '../components/blog/BlogHeader'
import axios from "axios"
import MyInfoSider from '../components/my/MyInfoSider';
import MyInfoMessageContent from '../components/my/MyInfoMessageContent';
import MyInfo from '../components/my/MyInfo';

export default class myInfoPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            siderData: [],
            messageData: []
        }

        axios.get('/static/myInfoSider.json').then(res => {
            this.setState({
                siderData: res.data
            });
        })

        axios.get('/static/messageData.json').then(res => {
            this.setState({
                messageData: res.data
            });
        })
    }

    // 判断显示哪个页面
    judgeShowPage = (clickIndex) => {
        switch (clickIndex) {
            case 0:
                return <MyInfo />
            case 1:
                return <MyInfoMessageContent messageData={this.state.messageData} />
            default:
                break;
        }
    }

    render() {
        let clickIndex = 0;
        const { type } = this.props.match.params;
        if (type === 'message') {
            clickIndex = 1;
        }
        return (
            <Fragment>
                <div style={{
                    width: '100%',
                    position: 'absolute',
                    zIndex: 2
                }}>
                    <BlogHeader activeIndex={2} />
                    <div style={{
                        marginTop: 50,
                        width: 1200,
                        position: 'relative',
                        left: '50%',
                        marginLeft: -600,
                        display: 'flex',
                        justifyContent: 'space-between'
                    }}>
                        <div style={{
                            width: 300,
                            height: 120,
                            boxShadow: '1px 1px 21px #ccc'
                        }}>
                            <MyInfoSider siderData={this.state.siderData} siderIndex={clickIndex} />
                        </div>
                        {
                            this.judgeShowPage(clickIndex)
                        }
                    </div>
                </div>
                <div style={{
                    height: '100%',
                    width: '100%',
                    position: 'fixed',
                    backgroundColor: '#eee',
                    backgroundAttachment: 'fixed',
                    backgroundSize: 'cover',
                    backgroundPosition: 'center top',
                    zIndex: 1
                }}>

                </div>
            </Fragment>
        )
    }
}
